
var createPaintBox = (function () {
    //创建paintBox
    function PaintBox() {

        //paintBox基本属性
        this.width = '600px';
        this.height = '500px';
        this.border = '3px solid black';
        this.position = 'absolute';
        this.zIndex = 1000;
        this.addStyle = addStyle;

        //显示paintBox
        this.show = function () {
            var paintBox = document.createElement('div');
            paintBox.classList.add('paintBox');

            //给paintBox添加样式
            this.addStyle.call(paintBox, {
                width: this.width,
                height: this.height,
                border: this.border,
                position: this.position,
                zIndex: this.zIndex
            })

            //将paintBox放到body中
            document.body.appendChild(paintBox);
            paintTopBar.show();
            paintNav.show();
            canvas.show();
        }
    }

    var paintBox = new PaintBox();

    //创建topBar
    function PaintTopBar() {

        //画板topBar基本属性
        this.width = '100%';
        this.height = '45px';
        this.border = '3px solid black';
        this.position = 'relative';
        this.title = 'DrawPaint';
        this.color = 'deeppink';
        this.addStyle = addStyle;

        //创建删除按钮
        this.deleteBtn = function () {
            var deleteBtn = document.createElement('div');
            deleteBtn.innerHTML = '×';

            //给deleteBtn添加样式
            this.addStyle.call(deleteBtn, {
                width: this.height,
                height: this.height,
                fontSize: '30px',
                textAlign: 'center',
                lineHeight: this.height,
                borderLeft: this.border,
                float: 'right'
            });
            //将deleteBtn添加到paintTopBar中
            document.querySelector('.paintTopBar').appendChild(deleteBtn);
        }

        //显示topBar
        this.show = function () {
            var paintTopBar = document.createElement('div');
            paintTopBar.innerHTML = this.title;
            paintTopBar.classList.add('paintTopBar');

            // 给paintTopBar添加样式
            this.addStyle.call(paintTopBar, {
                width: this.width,
                lineHeight: this.height,
                textAlign: 'center',
                borderBottom: this.border,
                position: this.position,
                backgroundColor: this.color
            });

            //将topBar放到paintBox中
            document.querySelector('.paintBox').appendChild(paintTopBar);
            this.deleteBtn();
        }
    }

    var paintTopBar = new PaintTopBar();

    //创建nav
    function PaintNav() {

        //画板nav基本属性
        this.width = '100%';
        this.height = '49px';
        this.border = '3px solid black';
        this.position = 'relative';
        this.color = 'hotpink';
        this.addStyle = addStyle;

        //创建nav列表
        this.navList = function () {
            var navList = document.createElement('ul');
            //给navList添加样式
            this.addStyle.call(navList, {
                listStyle: 'none',
                width: '100%',
                height: '100%',
                padding: 0,
                margin: 0
            })
            //创建navList中的li
            var list = ['type', 'tools', 'attr', 'clear'];
            for (var i = 0; i < list.length; i++) {
                var btn = document.createElement('li');
                this.addStyle.call(btn, {
                    width: '25%',
                    height: '100%',
                    lineHeight: '47px',
                    textAlign: 'center',
                    float: 'left',
                    border: '1px solid black',
                    boxSizing: 'border-box'
                });
                btn.classList.add(list[i]);
                btn.innerHTML = list[i];
                navList.appendChild(btn);
                document.querySelector('.paintNav').appendChild(navList);
            }
        }

        //显示nav
        this.show = function () {
            var paintNav = document.createElement('div');
            paintNav.classList.add('paintNav');
            paintNav.style.width = this.width;
            paintNav.style.height = this.height;
            paintNav.style.borderBottom = this.border;
            paintNav.style.position = this.position;
            paintNav.style.backgroundColor = this.color;

            //将nav放到paintBox中
            document.querySelector('.paintBox').appendChild(paintNav);
            this.navList();
        }
    }

    var paintNav = new PaintNav();

    //创建画布
    function Canvas() {
        this.width = '600';
        this.height = '400';
        this.show = function () {
            var cas = document.createElement('canvas');
            cas.width = this.width;
            cas.height = this.height;
            document.querySelector('.paintBox').appendChild(cas);
        }
    }

    var canvas = new Canvas();
    // return function show(){
    paintBox.show();
    // }



    function addStyle(obj) {
        // console.log(obj + '-----' + this);
        for (var k in obj) {
            this.style[k] = obj[k]
        }
    }


    var cas = document.querySelectorAll('canvas')[0];
    var ctx = cas.getContext('2d');

    function paintFree(ctx) {
        var isMouseDown = false;

        ctx.lineWidth = 4;

        cas.onmousemove = function (e) {
            // e.offsetX, e.layerX, e.clientX, e.screenX, e.pageX
            // document.title = e.offsetX + ', ' + e.offsetY;
            // console.log( e )

            if (isMouseDown) {
                // ctx.beginPath();
                // ctx.fillRect( e.offsetX - 4, e.offsetY - 4, 8, 8 );
                // ctx.fill();

                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            }
        };

        cas.onmousedown = function () {
            isMouseDown = true;

            ctx.beginPath();
        };

        cas.onmouseup = function () {
            isMouseDown = false;
        };
    };
    // paintFree(ctx);

    function paintRect(ctx) {
        ctx.lineWidth = 4;
        var x, y;
        cas.onmousedown = function (e) {
            x = e.offsetX;
            y = e.offsetY;
            ctx.translate(x,y);
        };

        cas.onmouseup = function (e) {
            var x1 = e.offsetX,
                y1 = e.offsetY;
            ctx.beginPath();
            ctx.rect(0,0,(x1 - x),(y1 - y));
            ctx.stroke();
        };
    }
    // paintRect(ctx);

    function paintCircle(ctx) {
        ctx.lineWidth = 4;
        var x, y;
        cas.onmousedown = function (e) {
            x = e.offsetX;
            y = e.offsetY;
            ctx.translate(x,y);
        };

        cas.onmouseup = function (e) {
            var x1 = e.offsetX,
                y1 = e.offsetY;
            ctx.beginPath();
            ctx.arc(0,0,Math.pow(Math.pow((x1 - x),2)+Math.pow((y1 - y),2),0.5),0,Math.PI*2);
            ctx.stroke();
        };
    }
    paintCircle(ctx);
})(window)
